<template>
  <div class="joincommunity-box">
    <scrollMore
      :showMoreTitle="list.length >= per_page"
      :load="getPostsByCircleId"
      :noMore="noMore"
    >
      <div class="joincommunity">
        <div class="cenerbanner">
          <div
            class="banner"
            :style="{
              'background-image': 'url(' + circleInfo.background_maps + ')',
            }"
          ></div>

          <div class="bozhuinfo f-j-sb-a-c">
            <div class="left f-a-c">
              <div class="img">
                <img :src="circleInfo.head_portrait" alt="" />
              </div>
              <div class="info f-d-c">
                <span>{{ circleInfo.circle_name }}</span>
                <span>{{ circleInfo.circle_introduce }}</span>
              </div>
            </div>
            <div class="rightitem f-a-c">
              <div class="right f-a-c" v-for="(item, index) in infoList" :key="index">
                <div class="itemright f-j-a-c f-d-c">
                  <div class="itemtop">
                    <span>{{ circleInfo[item.value] }}</span>
                  </div>
                  <div class="itembottom">
                    <span>{{ item.title }}</span>
                  </div>
                </div>
                <div class="line" v-if="index != 1"></div>
              </div>
              <div
                class="joinquanzi click f-j-a-c"
                @click="getfoucecircle(circleInfo)"
                :class="circleInfo.is_follow_circle ? 'canjoin' : ''"
              >
                {{ circleInfo.is_follow_circle ? "已关注" : "加入圈子" }}
              </div>
            </div>
          </div>

          <div class="all f-a-c">
            <div class="alltop f-d-c">
              <div class="allleft flex">
                <div class="shaixuan f-a-c">
                  <div
                    class="shaiitem click f-a-c"
                    v-for="(item, index) in alllist"
                    :key="index"
                    @click="alllistClick(index)"
                    :class="allCurretn == index ? 'shaiactive' : ''"
                  >
                    <span>{{ item.title }}</span>
                    <span>{{ item.num }}</span>
                  </div>
                </div>
              </div>

              <!-- 成员 -->
              <div class="allbox" v-if="alllist[allCurretn].type == 999">
                <div
                  class="boxitem click"
                  v-for="(item, index) in list"
                  :key="index"
                  @click.stop="listboxClick(item)"
                >
                  <div class="boxtop f-j-sb-a-c">
                    <div class="infoleft f-a-c">
                      <div class="boxlef">
                        <img :src="item.user_avatar" alt="" />
                      </div>
                      <div class="boxinfo">
                        <div class="infoitem">
                          <span>{{ item.user_name }}</span>
                        </div>
                        <div class="infocontent">
                          <span>粉丝:{{ item.follow_user_count }}</span>
                          <span>获赞:{{ item.like_count }}</span>
                        </div>
                      </div>
                    </div>
                    <div
                      class="noguanzhu click f-j-a-c"
                      @click.stop="gofollowNow(item)"
                      v-if="userInfo.id !== item.id"
                    >
                      {{ item.is_follow_user ? "已关注" : "关注" }}
                    </div>
                  </div>
                  <div class="boxcontent ellipsis2">
                    {{ item.user_introduce }}
                  </div>
                </div>
              </div>

              <!-- 贴子列表 -->
              <commentList :list="list" v-else></commentList>

              <!-- 无数据展示 -->
              <div
                class="community-card-box no-data-box"
                v-if="!list.length && alllist[allCurretn].type == 999"
              >
                <noData></noData>
              </div>
            </div>

            <communityRight
              :friendcommunity="true"
              :quanzhu="true"
              :intro="true"
              :Member="true"
              :ringmaster="ringmaster"
              :circlyDatalist="circlyDatalist"
              :circleInfo="circleInfo"
            ></communityRight>
          </div>
        </div>
      </div>
    </scrollMore>
  </div>
</template>

<script>
import communityRight from "../views/communityHome/communityRight.vue";
import { ElMessage } from "element-plus";

import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
} from "vue";
import {
  getCircleUserList,
  circleinfo,
  foucecircle,
  followNow,
  postsByCircleId,
} from "@/axios/community.js";

import scrollMore from "@/components/scrollMore.vue";
import commentList from "@/components/commentList.vue";

import { useStore } from "vuex";
export default defineComponent({
  components: { communityRight, scrollMore, commentList },
  setup() {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      allCurretn: 0,
      alllist: [
        {
          title: "推荐",
          type: 0,
          // num: "",
        },
        {
          title: "最新",
          type: 1,

          // num: 54,
        },
        {
          title: "热门",
          type: 2,
          // num: 54,
        },
        {
          title: "成员",
          num: 0,
          type: 999,
        },
      ],
      infoList: [
        {
          title: "笔记",
          num: 125,
          value: "circle_posts_count",
        },
        {
          title: "讨论",
          num: 40,
          value: "circle_follow_count",
        },
      ],
      circle_id: 0,
      circlyDatalist: [],
      circleInfo: {},
      list: [],
      page: 1,
      noMore: true, //是否还有下一页
      per_page: 0, //每页的数量
      ringmaster: [], //圈主人
    });

    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });

    let alllistClick = (index) => {
      if (data.allCurretn === index) return;
      data.allCurretn = index;
      data.list = [];
      data.page = 1;
      if (index == 3) {
        data.list = data.circlyDatalist;
      } else {
        getPostsByCircleId();
      }
    };

    // 获取圈子帖子列表
    let getPostsByCircleId = (more) => {
      if (more) {
        data.page += 1;
      } else {
        data.page = 1;
        data.noMore = true;
      }
      postsByCircleId({
        id: data.circle_id,
        page: data.page,
        type: data.alllist[data.allCurretn].type,
      }).then((res) => {
        let resultList = res.data.data;
        let resultData = res.data;

        resultList.forEach((item) => {
          item.showComment = false;
        });
        data.list = [...data.list, ...resultList];
        data.noMore = resultList < resultData.per_page;
        data.per_page = resultData.per_page;
      });
    };

    // 圈子中有谁
    let getCircleUserLists = () => {
      let id = "?circle_id=" + data.circle_id;
      getCircleUserList({ id }).then((res) => {
        data.circlyDatalist = res.data;
        data.alllist[3].num = res.data.length;
        data.ringmaster = data.circlyDatalist.filter(
          (item) => item.id == data.circleInfo.user_id
        );
      });
    };
    // 圈子详情
    let getcircleinfo = () => {
      let id = "?circle_id=" + data.circle_id;
      circleinfo({ id }).then((res) => {
        data.circleInfo = res.data;
        getCircleUserLists();
      });
    };

    // 关注以及取消关注
    let gofollowNow = (item) => {
      followNow({ posts_user_id: item.id }).then((res) => {
        ElMessage.success(res.message);
        item.is_follow_user = !item.is_follow_user;
      });
    };
    // 点击事件
    let listboxClick = (item) => {
      router.push({
        path: "/pages/user/user",
        query: { id: item.id },
      });
    };
    onMounted(() => {
      data.circle_id = router.currentRoute._value.query.id;
      // console.log(data.circle_id);
      // getCircleUserLists();
      getcircleinfo();
      getPostsByCircleId();
    });
    // 加入圈子
    let getfoucecircle = (item) => {
      foucecircle({ circle_id: item.id }).then((res) => {
        if (!item.is_follow_circle) {
          item.is_follow_circle = true;
          ElMessage.success("加入成功");
        } else {
          item.is_follow_circle = false;
          ElMessage.success("退出成功");
        }
      });
    };

    return {
      getPostsByCircleId,
      userInfo,
      gofollowNow,
      getfoucecircle,
      getcircleinfo,
      getCircleUserLists,
      listboxClick,
      alllistClick,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.joincommunity-box {
  // position: absolute;
  // top: 80px;
  width: 100%;
  background: #f9f9f9;
  // height: calc(100vh - 110px);
  height: 100%;
}

.joincommunity {
  padding: 0 10%;
  .cenerbanner {
    border-radius: 10px;
    background-color: #f9f9f9;
    height: 800px;
    max-width: 1360px;
    margin: 0 auto;
    // max-width: ;
    width: 100%;
    margin-top: 30px;
    min-width: 1110px;
    .banner {
      border-radius: 20px 20px 0 0;

      // background-image: url("../../../assets/image/banner-bj.jpg");
      min-height: 300px;
      background-repeat: no-repeat;
      width: 100%;
      background-size: cover;
    }
    .bozhuinfo {
      background-color: #fff;
      padding: 20px 30px 30px;
      .left {
        .img {
          margin-top: -70px;
          z-index: 2;
          width: 120px;
          height: 120px;
          > img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .info {
          margin-left: 30px;
          > span {
            &:first-child {
              font-size: 16px;
              font-family: Microsoft YaHei-Bold, Microsoft YaHei;
              font-weight: 700;
              color: #000000;
            }
            &:last-child {
              margin-top: 13px;
              font-size: 12px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #656f79;
              max-width: 500px;
              word-wrap: break-word;
            }
          }
        }
      }
      .rightitem {
      }
      .right {
        .itemright {
          .itemtop {
            > span {
              font-size: 14px;
              font-family: Microsoft YaHei-Bold, Microsoft YaHei;
              font-weight: 700;
              color: #000000;
            }
          }
        }
        .itembottom {
          > span {
            font-size: 12px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #656f79;
          }
        }
        .line {
          margin: 0 23px;
          width: 1px;
          height: 23px;
          background-color: #ececec;
        }
      }
      .canjoin {
        background: #f3f4f5 !important;
        color: #656f79 !important;
      }
      .joinquanzi {
        padding: 12px;
        border-radius: 10px;
        background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        margin-left: 23px;
      }
    }
    .all {
      align-items: flex-start;
      margin-top: 10px;
      .alltop {
        flex: 1;
      }
      .allleft {
        padding: 20px 40px;
        margin-right: 10px;
        background-color: #fff;
        border-radius: 10px;
        .shaixuan {
          .shaiitem {
            margin-right: 110px;
            > span {
              &:first-child {
                font-size: 16px;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                color: #656f79;
              }
              &:last-child {
                font-size: 12px;
                color: #656f79;
                margin-left: 5px;
              }
            }
          }
          .shaiactive {
            > span {
              color: #64c8dc !important;
            }
          }
        }
      }
      .allbox {
        padding: 10px 0;
        // flex-wrap: wrap;
        display: grid;
        grid-template-columns: repeat(auto-fill, 32.6%);
        grid-gap: 6px;
        .boxitem {
          padding: 20px;
          width: 100%;
          height: 154px;
          background: #ffffff;
          border-radius: 10px 10px 10px 10px;
          opacity: 1;
          .boxtop {
            align-items: flex-start;
            .boxlef {
              width: 54px;
              height: 54px;
              > img {
                border-radius: 50%;
                width: 100%;
                height: 100%;
              }
            }
            .boxinfo {
              margin-left: 10px;
              .infoitem {
                > span {
                  font-size: 16px;
                  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                  font-weight: 700;
                  color: #000000;
                }
              }
              .infocontent {
                margin-top: 8px;
                > span {
                  font-size: 14px;
                  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                  font-weight: 400;
                  color: #000000;
                  &:last-child {
                    margin-left: 20px;
                  }
                }
              }
            }
            .guanzhu {
              width: 60px;
              height: 26px;
              background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
              border-radius: 6px 6px 6px 6px;
              opacity: 1;
              font-size: 14px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #ffffff;
            }
            .noguanzhu {
              position: relative;
              z-index: 1;
              width: 60px;
              height: 26px;
              border-radius: 6px 6px 6px 6px;
              opacity: 1;
              border: 1px solid #ececec;
              font-size: 14px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #000;
            }
          }
          .boxcontent {
            margin-top: 20px;
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #656f79;
            line-height: 20px;
            height: 40px;
          }
        }
      }
    }
  }
}
</style>
